<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wai{
            width: 500px;
            height: 500px;
            border: 3px solid pink;
            text-align: center;
            border-radius: 10px;
            background-color: peachpuff;
        }
        /* 外围框架 */
        .zi1{
            padding-top: 10px;
            margin-left: -320px;
            font-size: 20px;
        }
        /* 欢迎注册的位置 */
        .deng:link{
            text-decoration: none;
        }
        /* 登录两字的去下划线 */
        .tu{
            width: 350px;
            height: 25px;
        }
        /* 输入框的大小 */
        .yan{
            width: 270px;
            height: 25px;
        }
        /* 获取验证码宽高 */
        .mi{
            width: 65px;
            font-size: 12px;
            height: 25px;
        }
        /* 设置按钮验证码的宽高 */
        .ce{
            width: 300px;
            height: 40px;
            border-radius: 10px;
            color: white;
            background-color: #BDCEFC;
        }
        /* 注册按钮 */
        .ce:hover{
            cursor: not-allowed;
        }
        /* 注册按钮的隐式禁止标志 */
        .cao:link{
            text-decoration: none;
            font-size: 14px;
        }
        /* 去下划线 */
        .yue{
            font-size: 14px;
        }
        .ni{
            color: #9B9B9D;
            padding-top: 10px;
            margin-left: -290px;
        }
    </style>
</head>
<body>
    <div class="wai">
        <form action="#">
        <h3 class="zi1">欢迎注册</h3>
        <p class="ni">已有账号？<a href="#" class="deng">登录</a></p>
        <br>
        <span>&nbsp;&nbsp;用户名&nbsp;<input type="text" placeholder="请设置用户名" class="tu"></span>
        <br><br>
        <span>&nbsp;&nbsp;手机号&nbsp;<input type="text" placeholder="可用于登录和找回密码" class="tu"></span>
        <br><br>
        <span>&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码&nbsp;<input type="text" placeholder="请设置登录密码" class="tu"></span>
        <br><br>
        <span>&nbsp;&nbsp;验证码&nbsp;<input type="text" placeholder="获取验证码" class="yan">
        <input type="text" value="获取验证码" class="mi" disabled>
        </span>
        <br><br>
        <input type="button" value="注册" class="ce"><br><br>
        <span class="yue">
            <input type="checkbox" >阅读并接受<a href="#" class="cao">《百度用户协议》</a>及<a href="#" class="cao">《百度隐私权保护声明》</a>
        </span>
    </form>
    </div>
</body>
</html>